<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="store">
    <div class="store__nav">
      <div class="store__nav__logo">
        <img src="./img/logo.png" alt="">
      </div>
      <div class="store__nav__list">
        <ul class="list">
          <li class="list__item">首页</li>
          <li class="list__item">商品分类</li>
          <li class="list__item">订单中心</li>
          <li class="list__item">购物车</li>
          <li class="list__item">个人中心</li>
        </ul>
      </div>
      <div class="store__nav__login">
        <button class="login button--primary">登录</button>
        <button class="register button--primary">注册</button>
      </div>
    </div>
    <div class="store-search">
      <div class="search-box">
        <div class="search-box--input">
          <div class="search-box--icon">
            <img src="./img/search.png" alt="">
          </div>
          <input type="text" class="search-input" placeholder="搜索商品">
        <button class="search-button">搜索</button>
        </div>
        <p class="search-hot">热门搜索：
          <a href="#">
            智能手机
          </a>
          <a href="#">
            笔记本
          </a>
          <a href="#">
            智能穿戴
          </a>
          <a href="#">
            智能眼镜
          </a>
          <a href="#">
            运动鞋
          </a>
        </p>
      </div>
    </div>
    <div class="store-category">
      <div class="category-title">
        <ul class="category-title__list">
          <li class="list-item">
            全部分类
          </li>
          <li class="list-item">
            电子产品
          </li>
          <li class="list-item">
            衣服
          </li>
          <li class="list-item">
            鞋子
          </li>
          <li class="list-item">
            箱包
          </li>
          <li class="list-item">
            珠宝
          </li>
          <li class="list-item">
            化妆品
          </li>
        </ul>
      </div>
      <div class="category-content">
        <div class="content-banner">
          <img src="./img/banner.png" alt="">

        </div>
        <div class="content-goods">
          <p class="goods-title">
            特色商品推荐
          </p>
          <div class="goods-item">
            <ul class="goods-item__list">
              <li class="goods-item__list__item">
                  <img src="./img/1.png" alt="">
                  <p class="goods-item__list__item__title">智能手表</p>
                  <p class="goods-item__list__item__price">¥899</p>
              </li>
              <li class="goods-item__list__item">
                  <img src="./img/2.png" alt="">
                  <p class="goods-item__list__item__title">真皮钱包</p>
                  <p class="goods-item__list__item__price">¥399</p>
              </li>
              <li class="goods-item__list__item">
                    <img src="./img/3.png" alt="">
                    <p class="goods-item__list__item__title">时尚双肩包</p>
                    <p class="goods-item__list__item__price">¥599</p>
              </li>
              <li class="goods-item__list__item">
                  <img src="./img/4.png" alt="">
                  <p class="goods-item__list__item__title">高端无线耳机</p>
                  <p class="goods-item__list__item__price">¥1299</p>
              </li>

            </ul>
          </div>
        </div>
        <div class="time-limit">
         <div class="time-limit__title">
            <p class="time-limit__title__text">
                限时秒杀
            </p>
            <div class="time-limit__title__time">
                <span class="number-text">距结束还剩：</span>
                <span class="number">02</span>
                <span>:</span>
                <span class="number">45</span>
                <span>:</span>
                <span class="number">30</span>
            </div>
         </div>
         <div class="time-limit-goods">
          <div class="box">
            <div class="time-limit-goods-img">
            <img src="./img/5.png" alt="">
          </div>
          <div class="price">
            <div class="nowprice">
              <P>¥199</P>
            </div>
            <div class="oldprice">
              <P>¥299</P>
            </div>
          </div>
          </div>
          <div class="box">
            <div class="time-limit-goods-img">
            <img src="./img/6.png" alt="">
          </div>
          <div class="price">
            <div class="nowprice">
              <P>¥199</P>
            </div>
            <div class="oldprice">
              <P>¥299</P>
            </div>
          </div>
          </div>
          <div class="box">
            <div class="time-limit-goods-img">
            <img src="./img/7.png" alt="">
          </div>
          <div class="price">
            <div class="nowprice">
              <P>¥199</P>
            </div>
            <div class="oldprice">
              <P>¥299</P>
            </div>
          </div>
          </div>
          <div class="box">
            <div class="time-limit-goods-img">
            <img src="./img/8.png" alt="">
          </div>
          <div class="price">
            <div class="nowprice">
              <P>¥199</P>
            </div>
            <div class="oldprice">
              <P>¥299</P>
            </div>
          </div>
          </div>
          <div class="box">
            <div class="time-limit-goods-img">
            <img src="./img/9.png" alt="">
          </div>
          <div class="price">
            <div class="nowprice">
              <P>¥199</P>
            </div>
            <div class="oldprice">
              <P>¥299</P>
            </div>
          </div>
          </div>
          <div class="box">
            <div class="time-limit-goods-img">
            <img src="./img/10.png" alt="">
          </div>
          <div class="price">
            <div class="nowprice">
              <P>¥199</P>
            </div>
            <div class="oldprice">
              <P>¥299</P>
            </div>
          </div>
          </div>
         </div>
        </div>
      </div>
      </div>
    <div class="store-foot">
        <div class="description">
          <div class="executive-function">
            <div class="function-box">
            <img src="./img/11.png" alt="">
           </div>
           <div class="function-box">
            <img src="./img/12.png" alt="">
           </div>
           <div class="function-box">
            <img src="./img/13.png" alt="">
           </div>
          </div>
          <div class="about_us">
            <p class="about_us__title">
              关于我们
            </p>
            <p class="about_it__text">
               公司介绍 
            </p>
            <p class="about_it__text">
               招贤纳士 
            </p>
            <p class="about_it__text">
               联系我们 
            </p>
          </div>
          <div class="about_us">
            <p class="about_us__title">
              帮助中心
            </p>
            <p class="about_it__text">
               购物指南 
            </p>
            <p class="about_it__text">
               支付方式 
            </p>
            <p class="about_it__text">
               配送说明 
            </p>
          </div>
          <div class="about_us">
            <p class="about_us__title">
              售后服务
            </p>
            <p class="about_it__text">
               退货政策 
            </p>
            <p class="about_it__text">
               退货流程 
            </p>
            <p class="about_it__text">
               售后政策 
            </p>
          </div>
          <div class="about_us">
            <p class="about_call__title">
              客服热线
            </p>
            <p class="about_callit__text1">
               400-123-4567
            </p>
            <p class="about_callit__text">
               周一至周日 9:00-22:00 
            </p>
          </div>`
        </div>
      </div>
    </div>
  </div>
    
</body>
</html>